import * as React from 'react';
import '../../../static/writeArticle.css';
import '../../../static/cssUnit.css';
import '../../../static/textEditor.css';
import {ReactMarkDownEditor} from "./ReactMarkDownEditor";
import {ISubListItem} from "../lib/SubListFactory";
import ToolBar from './ToolBar';
import ToolBarStrategy from "./ToolBarStrategy";
import {IReducer} from "../../../reducer";
import TimerSingleton from '../../..//unit/TimerSingleton';
import {connect} from 'react-redux';
import API from 'src/API';

export interface ITextEditorProps extends IReducer{
    subMenuList_list:ISubListItem
    markDownEditor:ReactMarkDownEditor
}

class TextEditor extends React.Component<ITextEditorProps>{
    toolBar:ToolBarStrategy = new ToolBarStrategy();
    isComposition:boolean = true;

    componentDidMount(){
        TimerSingleton.push({
            fn:this.submitTitle.bind(this),
            interval:500
        });

        TimerSingleton.run();

    };
    async submitTitle(){
        const storeId = this.props.subMenuList_list.storeId;
        if(this.props.subMenuList_list.title===this.props.markDownEditor.title){
            return ;
        }
        this.props.subMenuList_list.title =  this.props.markDownEditor.title;
        return API.post.uploadArticleTitle({title: this.props.subMenuList_list.title,storeId});
    }

    //todo 继续开发textarea显示内容的功能
    submitContent(){
        const markDownEditor = this.props.markDownEditor;
        const id = this.props.subMenuList_list.getStoreIdSelf();
        const title = markDownEditor.title;
        const anthology = markDownEditor.anthologyTitle;
        const content = markDownEditor.content;
        return API.post.uploadArticleText({id,title,author:'coffeeCat',anthology,content})
    }

    /**
     * 用以改变文章标题
     * */
    changeTitle(e:any){
        e.stopPropagation();
        if(!this.isComposition){
            this.setState({});
            this.isComposition = true;
            return ;
        }

        this.props.markDownEditor.title = e.target.value;
        this.refreshEditor();
    }

    /**
     * 改变文本区内容
     * */
    changeTextarea(e:any){
        e.stopPropagation();
        this.props.markDownEditor.content = e.target.value;
        this.refreshEditor();
    }

    refreshEditor(){
        this.setState({});
    }

    isCompositionstartEqualFalse(){
        this.isComposition = false;
    }

    render(){
        return (
            <div className="editor">
                <input className={'editor-title'}
                       onCompositionStart={this.isCompositionstartEqualFalse.bind(this)}
                       onChange={this.changeTitle.bind(this)}
                       value={this.props.markDownEditor.title}
               />
                <ToolBar toolBar={this.toolBar}
                         subMenuList_list={this.props.subMenuList_list}
                         markDownEditor={this.props.markDownEditor}/>
                <textarea className={'editor-tool-text'}
                          value={this.props.markDownEditor.content}
                          onChange={this.changeTextarea.bind(this)}>
                </textarea>
                <div className={'editor-tool-text-md'}/>
            </div>
        )
    }
}

function mapStateToProps(state:IReducer){
    const {componentRefreshReduce} = state;
    return {componentRefreshReduce}
}

function mapDispatchToProps(dispatch:any) {
    return {dispatch};
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    undefined,
    {pure:false})(TextEditor);


